import { useState } from "react";
import $ from "../axios";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { setMyId } from "../store/index";
import { Input, Button } from "@nutui/nutui-react";
import { Toast } from "@nutui/nutui-react";
import { WechatOutlined, QqOutlined, AlipayOutlined } from "@ant-design/icons";
import "../login/login.css";
export default function Login() {
    const [username, setUser] = useState('')
    const [password, setPass] = useState('')
    const Navigate = useNavigate()
    const Dispatch = useDispatch()
    const Login = async () => {
        await $.post('/Login', { username, password }).then(val => {
            if (val.data.code === 201) {
                sessionStorage.setItem('token', val.data.token)
                Dispatch(setMyId(val.data.id))
                sessionStorage.setItem('Myid', val.data.id)
                setUser('')
                setPass('')
                Navigate('/')
            } else {
                Toast.show({
                    content: val.data.msg,
                })
            }
        })
    }
    return (
        <div>
            <div className="login">
                <div className="nologin">
                    <Button type="success" onClick={() => Navigate('/')}>
                        つ我就看看
                    </Button>
                </div>
                <div className="wel">
                    <h2>欢迎来到优尼</h2>
                </div>
                <div className="input">
                    <div className="input1">
                        <h4>账号</h4>
                        <Input type="text" placeholder="手机/用户名/邮箱"
                            style={{ width: '91%' }}
                            value={username}
                            onChange={(value) => setUser(value)}
                        ></Input>
                    </div>
                    <div className="input2">
                        <h4>密码</h4>
                        <Input clearable type="password" placeholder="输入你的密码"
                            style={{ width: '91%' }}
                            value={password}
                            onChange={(value) => setPass(value)}
                        ></Input>
                    </div>
                    <div className="pass">
                        <h5 style={{ color: '#71b30e' }}>忘记密码</h5>
                        <h5 style={{ color: '#797373' }}>免密登录</h5>
                    </div>
                </div>
                <div className="welbtu">
                    <div className="welbtu1">
                        <Button onClick={() => Login()}>
                            登录
                        </Button>
                    </div>
                    <div className="welbtu2">
                        <Button onClick={() => Navigate('/register')}>
                            注册
                        </Button>
                    </div>
                </div>
                <div className="or">
                    <div className="">
                        <h4>-----------第三方登录-----------</h4>
                    </div>
                    <div className="icon">
                        <WechatOutlined />
                        <QqOutlined />
                        <AlipayOutlined />
                    </div>
                </div>
            </div>
        </div>
    );
}
